<template>
  <div :class="ns.b()">
    <div class="content-wrapper">
      <div class="container">
        <div class="previewImg">
          <img class="positionImg" :src="params.url" alt=""/>
          <div
            class="maskBlock"
            :style="{
          height: maskData.height + 'px',
          width: maskData.width + 'px',
          left: maskData.left + 'px',
          top: maskData.top + 'px',
        }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {decodeByBase64} from "@vc/utils";
import {useNamespace} from "vc/src/use";

const ns = /* hoist-static*/ useNamespace('img-view');
defineOptions({name: ns.b()});

const route = useRoute();
let params = $ref<Record<string, any>>({
  url: '', // 链接
  position: {}
});
const maskData = ref({
  width: "",
  height: "",
  left: "",
  top: "",
})
onMounted(() => {
  params = route.params;
  params.url = decodeByBase64(params.url) && decodeByBase64(params.url) !== 'null' ? decodeByBase64(params.url) : ''
  params.position = params.position ? JSON.parse(decodeByBase64(params.position)) : '';
  ((document.querySelector(".positionImg") as HTMLImageElement) as HTMLImageElement).onload = () => {
    let imgOriginalWidth =
      ((document.querySelector(".positionImg") as HTMLImageElement) as HTMLImageElement).naturalWidth;
    let imgOriginalHeight =
      (document.querySelector(".positionImg") as HTMLImageElement).naturalHeight;
    let imgOffsetWidth =
      (document.querySelector(".positionImg") as HTMLImageElement).offsetWidth;
    let imgOffsetHeight =
      (document.querySelector(".positionImg") as HTMLImageElement).offsetHeight;
    let scrollTopValue =
      (imgOffsetHeight * params.position.relativeTop) /
      imgOriginalHeight;

    maskData.value.height =
      ((imgOffsetHeight * params.position.height) / imgOriginalHeight as any);
    maskData.value.width =
      ((imgOffsetWidth * params.position.width) / imgOriginalWidth as any);
    maskData.value.left =
      ((imgOffsetWidth * params.position.relativeLeft) /
      imgOriginalWidth as any);
    maskData.value.top =
      ((imgOffsetHeight * params.position.relativeTop) /
      imgOriginalHeight as any);
    setTimeout(() => {
      (document.querySelector('.content-wrapper') as HTMLDivElement).scrollTop = scrollTopValue;
    }, 10);

  };
})
</script>
<style lang="scss" scoped>
.vc-img-view {
  background: #eaeaea;
  height: 100%;

  .content-wrapper {
    background: #eaeaea;

  }

  .container {
    margin: 0 auto;
    width: 1000px;
    background: white;
    padding: 14px 24px;
    height: 100%;
  }
}

.previewImg {
  position: relative;

  img {
    width: 100%;
  }

  .maskBlock {
    background: rgba(255, 230, 0, 0.65);
    position: absolute;
  }
}
</style>
